<template>
	<view>
		<view class="liu-tabs" :style="'top:'+top+'rpx;background:'+bgColor+';width:'+width+';height:'+height+'rpx;'">
			<scroll-view class="scroll-box-x" scroll-x="true" :scroll-with-animation="true"
				:scroll-into-view="scrollIntoXView">
				<view class="tab-list">
					<view class="tab-item"
						:style="index==tabIndex?'color:'+themeColor+';border-color:'+themeColor+';background:#FDF1EE;':'border-color:#F4F4F4;'"
						v-for="(item,index) in tabList" :key="index" :id="'tabItemX'+index"
						@click.stop="chooseTab(item,index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="choose-mess" @click.stop="open">
				<view class="choose-icon">
					<image class="choose-img" src="../../static/xiala.png"></image>
				</view>
			</view>
		</view>
		<view :catchtouchmove="isShow" class="scroll-popup" :style="scrollPopup" v-if="isShow">
			<view class="item-title">
				<view class="title-name">分类</view>
				<image @click.stop="close" class="title-img" src="../../static/shangla.png"></image>
			</view>
			<view class="list-mess">
				<view class="mess-name" v-for="(item,index) in tabList" :key="index" @click.stop="chooseTab(item,index)"
					:style="index==tabIndex?'color:'+themeColor+';border-color:'+themeColor+';background:#FDF1EE;':'border-color:#F4F4F4;'">
					{{item.name}}
				</view>
			</view>
		</view>
		<view v-show="isShow" :catchtouchmove="isShow" @click.stop="close()" class="scroll-mask"></view>
	</view>
</template>
<script>
	export default {
		props: {
			//菜单数据源
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//菜单栏宽度(rpx、px、%)
			width: {
				type: String,
				default: '100%'
			},
			//菜单栏高度(rpx)
			height: {
				type: Number,
				default: 88
			},
			//菜单栏距顶部距离(rpx)
			top: {
				type: Number,
				default: 0
			},
			//菜单栏背景色
			bgColor: {
				type: String,
				default: '#FFFFFF',
			},
			//主题色
			themeColor: {
				type: String,
				default: '#FD430E',
			},
		},
		computed: {
			scrollPopup() {
				return `top : ${this.top+'rpx'};
				border-radius: 12rpx;opacity: ${this.isShow ? 1 : 0};`;
			}
		},
		data() {
			return {
				isShow: false,
				scrollIntoXView: '',
				tabIndex: 0,
			};
		},
		methods: {
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
			},
			chooseTab(item, index) {
				this.close()
				this.tabIndex = index
				this.scrollIntoXView = 'tabItemX' + this.tabIndex
				this.$emit('change', item)
			}
		}
	};
</script>
<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
<style lang="scss" scoped>
	.liu-tabs {
		width: 100%;
		position: fixed;
		z-index: 99999 !important;
		overflow: hidden;

		.scroll-box-x {
			width: 100%;
			height: 100%;
			position: relative;
			box-sizing: border-box;
			padding-right: 68rpx;
			white-space: nowrap;

			.tab-list {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.tab-item {
					height: 56rpx;
					background: #F4F4F4;
					border-radius: 8rpx;
					border: 1rpx solid #F4F4F4;
					padding: 0 26rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 28rpx;
					margin-right: 16rpx;
					font-size: 26rpx;
				}
			}
		}

		.choose-mess {
			background-color: #FFFFFF;
			position: absolute;
			top: 15rpx;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 10rpx 10rpx #FFFFFF;

			.choose-icon {
				width: 58rpx;
				height: 58rpx;
				min-width: 58rpx;
				border-radius: 50%;
				background-color: #F4F4F4;
				display: flex;
				align-items: center;
				justify-content: center;

				.choose-img {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.scroll-popup {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		overflow: hidden;
		z-index: 99999 !important;
		transition: all 0.5s ease 0s;
		opacity: 0;
		box-sizing: border-box;
		padding: 36rpx 28rpx;

		.item-title {
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title-name {
				font-size: 30rpx;
				color: #333333;
			}

			.title-img {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.list-mess {
			width: 100%;
			display: grid;
			grid-auto-rows: minmax(0, auto);
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;

			.mess-name {
				box-sizing: border-box;
				height: 56rpx;
				background: #F4F4F4;
				border-radius: 8rpx;
				border: 1rpx solid #F4F4F4;
				padding: 0 26rpx;
				color: #666666;
				border-radius: 28rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.scroll-mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 99998 !important;
		overflow: hidden;
	}
</style>